// out: ../css/active2.css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.box {
    width: 300px;
    height: 200px;
    background-color: #AB69D9;
    margin: 200px auto;
    position: relative;
    z-index: 9;


    .top {
        width: 50px;
        height: 50px;
        background-color: #AB69D9;
        border: 2px solid rgba(255, 255, 255, 0.5);
        border-top: 2px solid #fff;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        animation: move 1s infinite linear;
    }


}

@keyframes move {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}